<template>
	<div style="margin: 20px; margin-top: 70px;">
		<dv-border-box-8 style="width:100%;height:580px; ">
			<div class="change-num-1" v-for="item in centerData" :key="item.title">
				<div class="icom-img"><img :src="item.img" alt=""></div>
				<div class="change-num-1-title">{{ item.title }}</div>
				<div class="digital-flop">
					<dv-digital-flop :config="item.number" style="width:100px;height:50px;" />
					<div class="unit">{{ item.unit }}</div>
				</div>
			</div>
			<div class="change-num-2" style="width: 504px;height:505px;">
				<div class="numbox-1" v-for="item in centerData2" :key="item.title">
					<div class="numbox-1-title">{{ item.title }}</div>
					<div class="digital-flop">
						<dv-digital-flop :config="item.number" style="width:226px;height:80px;" />
					</div>
				</div>
			</div>
		</dv-border-box-8>
	</div>
</template>
<script>
export default {
	name: 'Center',
	components: {

	},
	props: {
		rows: {
			default: {}
		}
	},
	data() {
		return {
			centerData: {},
			centerData2: {}
		}
	},
	mounted(){
		this.$watch('rows', () => {
			this.createData()
			this.createData2()



			this.data4 = {
        series: [
          {
            type: 'pie',
            data: [
              { name: '轻度视力不良', value: this.rows.allNum47 },
              { name: '中度视力不良', value: this.rows.allNum45 },
              { name: '高度视力不良', value: this.rows.allNum39 },
              { name: '视力正常', value: this.rows.allNum5 }
            ],
            radius: ['30%', '40%'],
            insideLabel: {
              show: false
            },
            outsideLabel: {
              labelLineEndLength: 10,
              formatter: '{percent}%\n{name}',
              style: {
                fontSize: 14,
                fill: '#fff'
              }
            }
          }
        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b']
      }
    })
	},
	created() {
		
	},
	methods: {
		createData () {
      const { randomExtend } = this
      this.centerData = [
        {
          img:require("../../assets/img/center1.png"),
          title: '监控总时长',
          number: {
            number: [randomExtend(190, 198)],
            content: '{nt}',
            textAlign: 'left',
            style: {
              fill: 'white'
            }
          },
          unit: '天'
        },
        {
          img:require("../../assets/img/center2.png"),
          title: '小学生视力不良率',
          number: {
            number: [randomExtend(190, 198)],
            content: '{nt}',
            textAlign: 'left',
            style: {
              fill: 'white'
            }
          },
          unit: '%'
        },
        {
          img:require("../../assets/img/center3.png"),
          title: '初中视力不良率',
          number: {
            number: [randomExtend(190, 198)],
            content: '{nt}',
            textAlign: 'left',
            style: {
              fill: 'white'
            }
          },
          unit: '%'
        },
      ] 
  },

  createData2 () {
      const { randomExtend } = this
      this.centerData2 = [
        {
          title: '全校学生总人数',
          number: {
            number: [this.rows.allNum],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: 'white',
              fontSize:"64",
              align:"center",
              lineHeight: '60'
            }
          }
        },
        {
          title: '小学部',
          number: {
            number: [this.rows.allNum66],
            content: '{nt}',
            textAlign: 'center',
            style: {
              fill: 'white',
              fontSize:"27",
            }
          }
        },
        {
          title: '中学部',
          number: {
            number: [this.rows.allNum55],
            content: '{nt}',
            textAlign: 'center',
            style: {
              fill: 'white',
              fontSize:"27",
            }
          }
        },
      ] 
  },
  randomExtend (minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10)
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
      }
  }
	}
}
</script>
<style lang="less" scope>
.change-num-1{
  float: left;
  width:140px;
  padding-top:12px;
  position: relative;
  padding-left:82px;
  margin-left:24px;
  background:url(../../assets/img/border.png) no-repeat center center;
  top:28px;
}
.icom-img{
  position: absolute;
  left:16px;
  top:16px;
}
.change-num-1 .dv-digital-flop{
  float: left;
}
.change-num-1 .unit{
  display: block;
    height: 50px;
    line-height: 48px;
    text-align: left;
    /* float: left; */
    position: relative;
    left: -45px;
}
.change-num-1-title{
  color:#02a6cd;
}
.change-num-2{
  background:url(../../assets/img/yuna.png) no-repeat center center;
  margin:0px auto;
  position:relative;
  top:100px;
}
.change-num-2 .numbox-1{
  font-size:25px;
  text-align: center;
  padding-top:18px;
}
.change-num-2 .numbox-1:first-child {
  text-align: center;
    font-size: 27px;
    position: relative;
    padding-top: 21%;
}
.change-num-2 .numbox-1:first-child .numbox-1-title{
  margin-bottom:38px ;
}
.change-num-2 .numbox-1:first-child+.numbox-1{
  position:relative;
  left:15%;
  float: left;
}
.change-num-2 .numbox-1:last-child{
  position:relative;
  right:7%;
  float: left;
}
.change-num-2 .dv-digital-flop{

}
.change-num-2 .numbox-1:first-child .dv-digital-flop{
  margin:0px auto;
  letter-spacing:22px;
  background:url(../../assets/img/k.png) repeat center bottom;
  background-size:100% 100%;
  padding-left: 26px;
  padding-top: 10px;
}	
</style>